<template>
	<view class="container">
		<u--form ref="queryForm" :model="query" label-width="160rpx">
		  <u-form-item label="物料名称" prop="materialName">
		    <u--input
		    	placeholder="请输入/扫描"
		    	v-model.trim="query.materialName"
		    	suffixIcon="scan"
		    	suffixIconStyle="font-size: 68rpx"
		    	style="flex: 1;"
					@confirm="getMission"
					@blur="getMission"
		    >
		    </u--input>
			</u-form-item>
			<u-form-item label="目的地" prop="destination">
		    <u--input
		    	placeholder="请输入/扫描"
		    	v-model.trim="query.destination"
		    	suffixIcon="scan"
		    	suffixIconStyle="font-size: 68rpx"
		    	style="flex: 1;"
					@confirm="getMission"
					@blur="getMission"
		    >
		    </u--input>
			</u-form-item>
		</u--form>
		<view v-if="missionList.length > 0" style="display: flex;flex-direction: column;gap: 10rpx;margin-top: 15rpx;">
			<uni-card v-for="(item, index) in missionList" :key="index">
				<u-read-more :showHeight="item.height" textIndent="0rem" :shadowStyle="shadowStyle" closeText="展开" openText="收起" toggle>
					<view class="item-container">
						<view style="display: flex;word-wrap: break-word;overflow-wrap: break-word;">
							<view style="white-space: nowrap;">任务号:</view>
							<view style="flex: 1;word-wrap: break-word;overflow-wrap: anywhere;">{{ item.commonTaskRecordId }}</view>
						</view>
						<view class="toppest">
							<view class="item-top">
								<view class="left">
									<view class="text-item">
										<text class="label">起点储位：</text>
										<text class="content">{{ item.startPoint }}</text>
									</view>
									<view class="text-item">
										<text class="label">载具号：</text>
										<text class="content">{{ item.containerCode }}</text>
									</view>
									<!-- <view class="text-item">
										<text class="label">优先级：</text>
										<text class="content">{{  }}</text>
									</view> -->
								</view>
								<view class="right">
									<view class="text-item">
										<text class="label">终点：</text>
										<text class="content">{{ item.endPoint }}</text>
									</view>
									<view class="text-item">
										<text class="label">状态：</text>
										<text class="content">{{ item.statusName }}</text>
									</view>
									<!-- <view style="display: flex;gap: 10rpx;">
										<u-button type="warning" size="small" style="width: 150rpx;" :loading="btn.loading" @click="priorityExecute(item)">优先执行</u-button>
										<u-button type="warning" size="small" style="width: 150rpx;" :loading="btn.loading" @click="forceComplete(item)">强制完成</u-button>
										<u-button type="warning" size="small" style="width: 150rpx;" :loading="btn.loading" @click="cancel(item)">取消任务</u-button>
									</view> -->
								</view>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view class="text-item">
									<text class="label">优先级：</text>
									<text class="content">{{  }}</text>
								</view>
								<view style="display: flex;gap: 10rpx;">
									<u-button type="warning" size="small" style="width: 200rpx;" :loading="btn.priority" @click="priorityExecute(item)">优先执行</u-button>
									<u-button type="warning" size="small" style="width: 200rpx;" :loading="btn.force" @click="forceComplete(item)">强制完成</u-button>
									<u-button type="warning" size="small" style="width: 200rpx;" :loading="btn.cancel" @click="cancel(item)">取消任务</u-button>
								</view>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;gap: 10rpx;margin: 5rpx 0;">
						<uni-card v-for="(item2, index2) in item.containerMaterialList" :key="index2">
							<view class="inner-card">
								<view class="inner-left">
									<view class="text-item">
										<text class="label">物料名：</text>
										<text class="content">{{ item2.materialName }}</text>
									</view>
									<view class="text-item">
										<text class="label">料号：</text>
										<text class="content">{{ item2.materialCode }}</text>
									</view>
								</view>
								<view class="inner-right">
									<view class="text-item">
										<text class="label">数量：</text>
										<text class="content">{{ item2.materialNum }}</text>
									</view>
								</view>
							</view>
						</uni-card>
					</view>
				</u-read-more>
			</uni-card>
		</view>
		<u-empty v-else mode="list"/>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { pdaTaskListAPI, agvMissionCompleteAPI, priorityExecuteAPI, cancelAPI } from '@/api/work/usageAPIList.js'
	import {
		uniCard
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard
		},
		data() {
			return {
				query: {
					materialName: '',
					destination: ''
				},
				shadowStyle: {
					backgroundImage: "none"
				},
				missionList: [],
				btn: {
					priority: false,
					force: false,
					cancel: false
				},
				userRoles: []
			};
		},
		created() {
			this.getInfo()
		},
		mounted() {
			this.getMission()
		},
		methods: {
			getInfo() {
			  const app = this
			  app.$store.dispatch('Info').then(res => {
					app.userRoles = res.roles
			  })
			},
			async forceComplete(item) {
				try{
					this.btn.force = true
					const res = await agvMissionCompleteAPI(item.commonTaskRecordId)
					if (res.returnCode === '1') {
						this.getMission()
						this.$refs.uToast.show({
							type: 'success',
							message: res.returnReason || '操作成功'
						})
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.returnReason || '操作失败'
						})
					}
				} finally {
					this.btn.force = false
				}
			},
			async cancel(item) {
				try {
					this.btn.cancel = true
					const res = await cancelAPI(item.commonTaskRecordId)
					if (res.returnCode === '1') {
						this.getMission()
						this.$refs.uToast.show({
							type: 'success',
							message: res.returnReason || '操作成功'
						})
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.returnReason || '操作失败'
						})
					}
				} finally {
					this.btn.cancel = false
				}
			},
			async priorityExecute(item) {
				try {
					this.btn.priority = true
					const res = await priorityExecuteAPI(item.commonTaskRecordId)
					if (res.returnCode === '1') {
						this.getMission()
						this.$refs.uToast.show({
							type: 'success',
							message: res.returnReason || '操作成功'
						})
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.returnReason || '操作失败'
						})
					}
				} finally {
					this.btn.priority = false
				}
			},
			async getMission() {
				const submitForm = {
					materialName: this.query.materialName,
					endPoint: this.query.destination
				}
				const res = await pdaTaskListAPI(submitForm)
				if (res.returnCode === '1') {
					this.missionList = res.returnData || []
					this.$nextTick(() => {
						this.getElementHeight()
					})
				}
			},
			getElementHeight() {
				const query = uni.createSelectorQuery()
				query.selectAll('.item-container').boundingClientRect(data => {
					if (data) {
						const heights = data.map(item => item.height)
						this.missionList = this.missionList.map((item, index) => {
							return {
								...item,
								height: heights[index]
							}
						})
					}
				}).exec()
			}
		}
	}
</script>

<style lang="scss">
::v-deep .uni-card {
	margin: 0 !important;
	padding: 0 !important;
}
.item-container {
	display: flex;
	flex-direction: column;
}
.toppest {
	display: flex;
	flex-direction: column;
}
.item-top {
	width: 100%;
	// height: 300rpx;
	display: flex;
	justify-content: space-between;
	.left, .right {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
		justify-content: center
	}
	.text-item {
		display: flex;
		word-wrap: break-word;
		overflow-wrap: break-word;
		.label {
			white-space: nowrap;
		}
		.content {
			flex: 1;
			word-wrap: break-word;
			overflow-wrap: anywhere;
		}
	}
}
.inner-card {
	display: flex;
	.inner-left {
		flex: 1;
	}
	.inner-right {
		flex: 1;
	}
	.text-item {
		display: flex;
		word-wrap: break-word;
		overflow-wrap: break-word;
		.label {
			white-space: nowrap;
		}
		.content {
			flex: 1;
			word-wrap: break-word;
			overflow-wrap: anywhere;
		}
	}
}

.uni-card {
	background-color: #fefecc;
	border-color: #fcf493;
}
</style>
